<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      p {
        font-size: 20px;
        line-height: 30px;
        font-family: Monospace;
      }
      .cursor {
        display: inline-block;
        position: relative;
        top: 2px;
        width: 2px;
        height: 23px;
        background-color: #000;
        border-radius: 3px;
      }

      .stay {
        animation: shining 1s ease-in-out infinite;
      }

      .char {
        position: relative;
        animation: fadeFromTop 200ms ease-in-out 1;
      }

      @keyframes fadeFromTop {
        0% {
          /*opacity: 0;*/
          /*transform: translate3d(0, -20px, 0);*/
          top: -10px;
        }
        100% {
          /*opacity: 1;*/
          /*transform: translate3d(0, 0, 0);*/
          top: 0;
        }
      }

      @keyframes shining {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      p {
        transition: background 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
        width: 300px;
        height: 100px;
      }

      p[running] {
        background-color: #000;
        color: #fff;
      }
      p[running] .cursor {
        background-color: #fff;
      }
      p[stop] {
        background-color: #fff;
        color: #000;
      }
    </style>
  </head>
  <body>
    <p></p>
    <div id="vader"></div>
    <div id="luke"></div>
    <script src="bilibala.js"></script>
  </body>
</html>